<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>Vue 飞机大战</title>
	<link rel="stylesheet" href="css/style.css">
</head>

<body>
	<main>
		<!-- 游戏界面 -->
		<div class="game-plane" @mousemove="touchmove" :style="{backgroundPosition:'0px '+ positionY +'px'}" ref='plane'>
			<div id="hit" ref="hit">
				<h2>击毁：{{ hitCount }}</h2>
				<h2>与敌机相撞：{{ boom }}</h2>
				<h2>被击中次数：{{ HitTimes }}</h2>
				<h2>用户名：{{ username }}</h2>
				<h2> P:结束游戏 <br />空格发射子弹 <br />鼠标控制移动</h2>
			</div>

			<!-- 玩家 -->
			<img src="image/player.png" alt="player" id="p" :style="{top:p.y + 'px',left:p.x+'px'}">

			<!-- 星球 -->
			<img v-for="(item,index) of plane.arr" :style="{top:item.y + 'px',left:item.x+'px'}" src="image/plane.png"
				alt="plane">

			<!-- 敌军 -->
			<img v-for="(item,index) of e.arr" :style="{top:item.y + 'px',left:item.x+'px'}" src="image/e.png" class="e"
				alt="e">

			<!-- 子弹 -->
			<img v-for="(item,index) of bullets.arr" class="b" :style="{top:item.y + 'px',left:item.x+'px'}"
				:src="item.tag == 'p' ? 'image/p_b.png' : 'image/e_b.png' " alt="p_b">

			<!-- 结合结算面板 -->
			<div class="alert" ref="end" style="display: none;">
				<div class="content">
					<div id="end-content">
						<h2>用户名：{{ username }}</h2>
						<h2>击毁：{{ hitCount }}</h2>
						<h2>与敌机相撞：{{ boom }}</h2>
						<h2>被击中次数：{{ HitTimes }}</h2>
						<h1>综合成绩：{{achievement}}</h1>
					</div>
					<div class="right">
						<input type="submit" @click="myrefresh" value="新游戏">
					</div>
				</div>
			</div>
		</div>

		<!-- 开始面板 -->
		<div class="alert" ref="alert">
			<div class="content">
				<div class="left">
					<h1>Vue 飞机大战</h1>
					<p>作者：大脚</p>
					<img :src="faceChange" class="face">
				</div>
				<div class="right">
					<input type="text" v-model="username" placeholder="请输入你的名字">
					<input type="submit" @click="startBtnClick" value="开始游戏">
				</div>
			</div>
		</div>

	</main>
	<script src="js/vue.js"></script>
	<script src="js/data.js"></script>
	<script src="js/app.js"></script>
	<script type="text/javascript">
		/* 	const a = document.querySelector('.right')
		window.onkeydown = function (event) {
			console.log(event.keyCode)
		} */
	</script>
</body>

</html>